<template>
    <div id="topic">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
                <router-link
                    tag="li"
                    v-for="(item,index) in list"
                    :key="index"
                    :to="`/pages/topicdetail?id=${item.id}`"
                >
                    <img :src="item.scene_pic_url" alt />
                    <div class="info">
                        <p>{{ item.title }}</p>
                        <p>{{item.subtitle}}</p>
                        <p>{{item.price_info}}元起</p>
                    </div>
                </router-link>
            </ul>
        </van-list>
    </div>
</template>

<script>
import { listaction } from "@/api/topic";
export default {
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            page: 1,
        };
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
        onLoad() {
            listaction({
                page: this.page,
            }).then((res) => {
                // console.log(res ,"topic获取得数据");
                this.list.push(...res.data);
                this.page += 1;
                this.loading = false;
                // 获取最后一页得数据得时候 禁止加载数据
                console.log(this.page);
                if (res.total == this.page - 1) {
                    this.finished = true;
                }
            });
            console.log("滚动到页面底部");
        },
    },
};
</script>

<style scoped lang="scss">
#topic {
    padding-bottom: 1.333333rem;
    background: #f4f4f4;
    li {
        background: #fff;
        text-align: center;
        padding-bottom: 0.26667rem;
        margin-bottom: 0.26667rem;
        img {
            width: 100%;
            height: 5.53333rem;
        }
        .info {
            text-align: center;
            :first-child {
                color: #333;
                font-size: 0.46667rem;
                margin-top: 0.4rem;
            }
            :nth-child(2) {
                color: #999;
                font-size: 0.32rem;
                margin-top: 0.21333rem;
                padding: 0 0.26667rem;
            }
            :nth-child(3) {
                color: #b4282d;
                font-size: 0.36rem;
                margin-top: 0.26667rem;
            }
        }
    }
}
</style>